<template>
  <div class="wrapper">
    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <i class="icon-yundijie"></i>
      </div>
      <div class="ui secondary pointing three item demo menu">
        <a class="item active">
          A
        </a>
        <a class="item">
          B
        </a>
        <a class="item">
          C
        </a>
      </div>

      <div v-if="menus" class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li v-for="menu in menus" @click="changeTopMenu(menu.id)">

            <a v-if="menu.title=='统计后台'" :class="{current:menu.id==top_mid}"
               target="_blank" :href="tjhref">
              {{menu.title}}
            </a>
            <router-link v-else-if="menu.route" :class="{current:menu.id==top_mid}"
                         :to="{path:menu.route,query:{ctl:menu.ctl,top_mid:menu.id}}">
              {{menu.title}}
            </router-link>

            <router-link v-else :class="{current:menu.id==top_mid}"
                         :to="{path:'/page/list',query:{ctl:menu.ctl,top_mid:menu.id}}">
              {{menu.title}}
            </router-link>

          </li>

        </ul>
        <ul class="nav navbar-nav navbar-right">

          <li v-if="isLogin" class="uinfo">
            <i class="icon-photo"></i>
            <span>{{userName}}</span>

          </li>
          <li class="login">
            <!--<a v-if="!user.isLogin">登录</a>-->
            <i class="icon-exit" title="退出登录" @click="logout"></i>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>
<script type="text/ecmascript-6">
  import tool from 'src/util/tool';
  import util from '_util/index';


  export default{
    data(){
      return {
        cmap: [],
        conf: null,
        menus: null,
        path: '',
        detailShow: false,
        userName: this.$cookie.get('txy_name')
      }
    },
    methods: {
      changeTopMenu(mid){
        util.setCtlinfo(this);
        let eventVue = util.store.get(this,'eventVue');
        eventVue.$emit('menuUpdate', mid)
      },

      getTopMenuConf() {
        let url = tool.getApi(this, 'Editget', 'getTopMenuConf');
        let param = {}
        util.getDataCom(this, url, param, (rs) => {
          this.conf = rs

          this.menus = this.conf.map(obj => {
            let tmp = this._menus.find(menu => {
              return obj.id == menu.id
            })
            tmp.disable = obj.disable
            return tmp
          })
          this.menus = this.menus.filter(menu => {
            return !menu.disable
          })

        });

      },

      logout(){
        this.$cookie.delete('txy_name');
        this.$cookie.delete('txy_token');
        this.$emit('logout')
      }
    },
    computed: {
      top_mid() {
        return this.$route.query.top_mid || this.$store.state.global.top_mid;
      },
      isLogin(){
        return this.$cookie.get('txy_name') && this.$cookie.get('txy_token')
      },
      tjhref(){
        let url = this.$store.state.global.statHost
        return `${url}/!#/home/total`
      }

    },
    watch: {
      _menus(val){
      }
    },
    components: {},
    props: ['_menus', 'user'],
    created(){

      this.getTopMenuConf()
    },
    mounted(){
      this.menus = this._menus//后台处理
    }
  }
</script>
<style rel="stylesheet/less" lang="less">

  @dir: "header/";
  .icon-com {
    line-height: 50px;
    font-size: 20px;
    display: block;
    color: rgba(0, 0, 0, 0.6);
    &:hover {
      color: rgba(0, 0, 0, 0.9);
    }
  }

  .wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    .navbar-header {
      width: 200px;
      text-align: left;
      display: block;
      border-radius: 3px;
      &:hover {
      }
      .icon-yundijie {
        margin-left: 30px;
        font-size: 70px;
        line-height: 50px;
        display: inline-block;
        color: rgba(0, 0, 0, 0.8);
      }
    }
    .nav {
      li {
        a.current {
          font-size: 18px;
          font-weight: 700;
          border-bottom: 5px solid rgba(0, 0, 0, 0.7);
          box-sizing: border-box;
        }
      }
    }
    .uinfo {
      position: relative;
      .icon-photo {
        position: absolute;
        top: 0;
        left: -20px;
        .icon-com();
      }
      span {
        line-height: 50px;
        font-size: 20px;
        display: block;
        margin: 0 10px;
      }
      padding-right: 20px;
    }
    .login {
      .icon-exit {
        .icon-com();
        font-size: 26px;
        cursor: pointer;
        margin: 0 20px;
      }
      a {
        cursor: pointer;
      }
    }
  }
</style>
